<%@ page import="com.iweb.constant.CategoryAction" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta charset="utf-8"/>
  <title>新增分类</title>

  <meta name="description" content=""/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

  <!-- bootstrap & fontawesome -->
  <link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css"/>
  <!-- text fonts -->
  <link rel="stylesheet" href="assets/css/fonts.googleapis.com.css"/>
  <!-- ace styles -->
  <link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style"/>
  <link rel="stylesheet" href="assets/css/ace-skins.min.css"/>
  <link rel="stylesheet" href="assets/css/ace-rtl.min.css"/>
  <!-- ace settings handler -->
  <script src="assets/js/ace-extra.min.js"></script>
</head>

<body class="no-skin">
<%@include file="navbar.jsp" %>

<div class="main-container ace-save-state" id="main-container">
  <script type="text/javascript">
    try {
      ace.settings.loadState('main-container')
    } catch (e) {
    }
  </script>

  <%@include file="siderbar.jsp" %>

  <div class="main-content">
    <div class="main-content-inner">
      <div class="breadcrumbs ace-save-state" id="breadcrumbs">
        <ul class="breadcrumb">
          <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="#">Home</a>
          </li>

          <li>
            <a href="#">Other Pages</a>
          </li>
          <li class="active">Blank Page</li>
        </ul><!-- /.breadcrumb -->

        <div class="nav-search" id="nav-search">
          <form class="form-search">
								<span class="input-icon">
									<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input"
                         autocomplete="off"/>
									<i class="ace-icon fa fa-search nav-search-icon"></i>
								</span>
          </form>
        </div><!-- /.nav-search -->
      </div>

      <div class="page-content">
        <div class="ace-settings-container" id="ace-settings-container">
          <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
            <i class="ace-icon fa fa-cog bigger-130"></i>
          </div>

          <div class="ace-settings-box clearfix" id="ace-settings-box">
            <div class="pull-left width-50">
              <div class="ace-settings-item">
                <div class="pull-left">
                  <select id="skin-colorpicker" class="hide">
                    <option data-skin="no-skin" value="#438EB9">#438EB9</option>
                    <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                    <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                    <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
                  </select>
                </div>
                <span>&nbsp; Choose Skin</span>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-navbar"
                       autocomplete="off"/>
                <label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-sidebar"
                       autocomplete="off"/>
                <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-breadcrumbs"
                       autocomplete="off"/>
                <label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" autocomplete="off"/>
                <label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-add-container"
                       autocomplete="off"/>
                <label class="lbl" for="ace-settings-add-container">
                  Inside
                  <b>.container</b>
                </label>
              </div>
            </div><!-- /.pull-left -->

            <div class="pull-left width-50">
              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" autocomplete="off"/>
                <label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" autocomplete="off"/>
                <label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
              </div>

              <div class="ace-settings-item">
                <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" autocomplete="off"/>
                <label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
              </div>
            </div><!-- /.pull-left -->
          </div><!-- /.ace-settings-box -->
        </div><!-- /.ace-settings-container -->
        <div class="row">
          <div class="col-xs-12">
            <form action="category.do?action=<%=CategoryAction.DOADD%>" class="form-horizontal" role="form"
                  id="category-form" method="post">
              <%--保存父类别id--%>
              <input id="parentId" type="hidden" name="parentId" value="">
              <%--保存分类级别--%>
              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="type"> 分类级别 </label>
                <div class="col-sm-9">
                  <div class="row">
                    <div class="col-sm-5">
                      <select class="form-control col-sm-5" id="type" name="type">
                        <option value="">请选择分类级别</option>
                        <option value="1">一级分类</option>
                        <option value="2">二级分类</option>
                        <option value="3">三级分类</option>
                      </select>
                    </div>
                    <span class="help-inline col-xs-12 col-sm-7 red">
                          <span class="middle"></span>
                      </span>
                  </div>
                </div>
              </div>
              <div id="div-type-one" class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="type"> 一级分类名称 </label>
                <div class="col-sm-9">
                  <div class="row">
                    <div class="col-sm-5">
                      <select class="form-control col-sm-5" id="select-type-one" name="typeOne">
                      </select>
                    </div>
                    <span class="help-inline col-xs-12 col-sm-7 red">
                          <span class="middle"></span>
                    </span>
                  </div>
                </div>
              </div>

              <div id="div-type-two" class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="type"> 二级分类名称 </label>
                <div class="col-sm-9">
                  <div class="row">
                    <div class="col-sm-5">
                      <select class="form-control col-sm-5" id="select-type-two" name="typeTwo">
                      </select>
                    </div>
                    <span class="help-inline col-xs-12 col-sm-7 red">
                          <span class="middle"></span>
                    </span>
                  </div>
                </div>
              </div>


              <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="name"> 分类名称 </label>
                <div class="col-sm-9">
                  <input type="text" id="name" placeholder="分类名称" name="name" class="col-xs-10 col-sm-5"/>
                  <span class="help-inline col-xs-12 col-sm-7 red">
												<span class="middle"></span>
                  </span>
                </div>
              </div>
              <div class="clearfix form-actions">
                <div class="col-md-offset-3 col-md-9">
                  <button class="btn btn-info" type="button" id="btn-save">
                    <i class="ace-icon fa fa-check bigger-110"></i>
                    保存
                  </button>
                  &nbsp; &nbsp; &nbsp;
                  <button class="btn" type="reset">
                    <i class="ace-icon fa fa-undo bigger-110"></i>
                    重填
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

  </div>
  <%@include file="footer.jsp" %>
</div>

<script src="assets/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
  if ('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>
<script src="assets/js/common.js"></script>
<script>
  $(function () {
    // 一级分类名称和二级分类名称,默认隐藏
    $("#div-type-one").hide();
    $("#div-type-two").hide();

    // 绑定表单提交事件
    $("#btn-save").click(function () {
      // 非空校验
      if (!$("#type").val()) {
        $("#type").parent().next("span").children("span").text("请选择分类级别");
        return;
      }

      // 验证一级分类名称,只有分类级别为二级时,才验证
      if ($("#type").val() == 2) {
        if (!$("#select-type-one").val()) {
          $("#select-type-one").parent().next("span").children("span").text("请选择一级分类名称");
          return;
        }
      }

      // 分类名称不能为空
      if (!$("#name").val()) {
        $("#name").next("span").children("span").text("分类名称不能为空");
        return;
      }

      // 提交表单
      $("#category-form").submit();
    });


    // 绑定分类级别的事件
    $("#type").change(function () {
      // 当值为一级分类时,要设置父分类为0,即没有父分类
      if (this.value == 1) {
        $("#parentId").val(0);
        // 一级分类名称下拉框隐藏
        $("#div-type-one").hide(200);
      }
      // 当值为二级分类时,说明要添加的分类是二级分类
      // 此时,要显示出所有的一级分类,供用户选择
      if (this.value == 2) {
        // 显示
        $("#div-type-one").show(200);
        // 获取一级分类列表
        fillListByParentId(0, $("#select-type-one"));
      }
      // 清除错误提示
      if (this.value != 0) {
        $("#type").parent().next("span").children("span").text("");
      }
    });

    // 一级分类名称绑定的事件
    $("#select-type-one").change(function () {
      // 修改parentId的值
      $("#parentId").val(this.value);
      $("#select-type-one").parent().next("span").children("span").text("");

      // 当用户选择了三级分类时
      // 显示该分类下的所有的二级分类数据
      let type = $("#type").val();
      if (type == 3) {
        $("#div-type-two").show(200);
        fillListByParentId(this.value, $("#select-type-two"));
      }
    });

    // 一级分类名称绑定的事件-值修改时触发
    $("#select-type-two").change(function () {
      // 修改parentId的值
      let type = $("#type").val();
      /*
        只有用户想添加三级分类时，才能设置当前选中的二级分类为
        要添加的三级分类的父分类
      */
      if (type == 3) {
        $("#parentId").val(this.value);
      }
    });


    $("#name").change(function () {
      $("#name").next("span").children("span").text("");
    });

  });


</script>
</body>
</html>
